<!--
  author: tangcheng_cd
  create by: 2018/6/6
  descr: 新增修改面板

  pkg_meta_id   数据包的元数据代码
  table_meta_id   物理表的元数据代码
  colume_attr   字段属性
  busi_desc   业务描述
  tech_desc   技术描述
  te_date   生效日期
  le_date   失效日期
-->
<template>
  <div>
    <el-dialog
      :title="dialogMode === 'ADD' ? '新增' : '编辑'"
      :visible.sync="dialogVisiable"
      v-model="dialogMode"
      @close="ardCancelBtnClick"
      class="mdpt-modify-dialog"
      width="822px">
      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        :label-position="'right'">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="包元数据代码" prop="pkg_meta_id">
              <el-input v-model="formData.pkg_meta_id"
                        disabled
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="表元数据代码" prop="table_meta_id">
              <el-input v-model="formData.table_meta_id"
                        placeholder="请在此输入">
                <el-button slot="append" @click="selectTableBtnClicked">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="字段属性" prop="colume_attr">
              <el-input v-model="formData.colume_attr"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务描述" prop="busi_desc">
              <el-input v-model="formData.busi_desc"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="技术描述" prop="tech_desc">
              <el-input v-model="formData.tech_desc"
                        placeholder="请在此输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 提交的时候拆出开始时间beginDt和结束时间endDt -->
            <!--<el-form-item label="有效日期" prop="availDate">-->
              <!--<el-date-picker v-model="formData.availDate"-->
                              <!--type="daterange"-->
                              <!--align="right"-->
                              <!--unlink-panels-->
                              <!--format="yyyy-MM-dd"-->
                              <!--value-format="yyyyMMdd"-->
                              <!--range-separator="至"-->
                              <!--start-placeholder="开始日期"-->
                              <!--end-placeholder="结束日期">-->
              <!--</el-date-picker>-->
            <!--</el-form-item>-->
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')" class="dialog-btn">重置</el-button>
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
    </el-dialog>
    <select-meta-table-dialog
      ref="selectMetaTableDialog">
    </select-meta-table-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import ajax from '../../../../api/ajax/ajax'
import api from '../../../../api/url'
import selectMetaTableDialog from './selectMetaTableDialog'
import {letterValidators, numLetteValidator} from '../../../../assets/js/rules'

export default {
  components: {
    selectMetaTableDialog
  },
  name: 'mdp-add-modify-panel',
  data () {
    return {
      dialogVisiable: false, // 新增对话框显示控制
      dialogMode: { // 对话框色对话框模式  ADD新增 MODIFY 修改
        type: String,
        default: 'ADD'
      }, // 对话框模式
      currentItem: {
        pkg_meta_id: null,
        table_meta_id: null,
        colume_attr: null,
        busi_desc: null,
        tech_desc: null
      }, // 表单初始化数据
      formData: {}, // 新增对话框表单数据
      formRules: {
        pkg_meta_id: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' },
          { validator: numLetteValidator, trigger: 'blur' }
        ],
        table_meta_id: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
          { validator: numLetteValidator, trigger: 'blur' }
        ],
        colume_attr: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' },
          { validator: letterValidators, trigger: 'blur' }
        ],
        busi_desc: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
        ],
        tech_desc: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 166, message: '长度在 1 到 60 个字符', trigger: 'blur' }
        ]
        // ,availDate: [
        //   { required: true, message: '此项为必输项', trigger: 'blur' }
        // ]
      } // 新增对话框表单项规则
    }
  },
  methods: {
    // 新增显示对话框
    addShow (leftNode) {
      // 显示新增对话框
      this.dialogVisiable = true
      // 新增对话框模式
      this.dialogMode = 'ADD'

      // 表单数据初始化
      this.currentItem = {
        pkg_meta_id: null,
        table_meta_id: null,
        colume_attr: null,
        busi_desc: null,
        tech_desc: null
      }
      this.currentItem.pkg_meta_id = leftNode.meta_id
      let formData = {...this.currentItem}

      this.formData = formData
    },
    // 编辑显示对话框
    editShow (selNode) {
      // 显示编辑对话框
      this.dialogVisiable = true
      // 新增对话框模式
      this.dialogMode = 'MODIFY'

      // 表单数据初始化
      this.currentItem = selNode
      this.formData = {...this.currentItem}
    },
    // 取消操作
    ardCancelBtnClick () {
      this.dialogVisiable = false
      // 清空数据
      this.formData = {}
      // 清除验证
      this.$refs.form.clearValidate()
    },
    // 重置表单
    resetForm (formName) {
      this.formData = {...this.currentItem}
      // 清除验证
      this.$refs.form.clearValidate()
    },
    // 预处理表单数据
    preHandFormData (formData) {
      // let availDate = formData['availDate']

      return {
        // te_date: availDate[0],
        // le_date: availDate[1],
        ...formData
      }
    },
    // 提交新增数据
    submitFormData () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let postData = this.preHandFormData(this.formData)
          let callback = () => {
            // 隐藏新增对话框
            this.dialogVisiable = false
            // 数据清空
            setTimeout(() => {
              this.resetForm('form')
            }, 200)
            this.$emit('submitAfter')
          }
          if (this.dialogMode === 'ADD') {
            // 新增
            ajax.post(api.INSERT_META_DATAPKG_TABLE, postData).then(res => {
              callback && callback()
            })
          } else {
            // 修改
            ajax.post(api.UPDATE_META_DATAPKG_TABLE, postData).then(res => {
              callback && callback()
            })
          }
        } else {
          return false
        }
      })
    },
    // 选择表按钮点击
    selectTableBtnClicked () {
      let _this = this
      let selectedTableHandler = currentNode => {
        if (currentNode) {
          _this.formData.table_meta_id = currentNode.meta_id
          return true
        } else {
          this.$message.error('请选择一条记录')
        }
        return false
      }
      this.$refs.selectMetaTableDialog.show(selectedTableHandler)
    }
  },
  created () {
    // 默认表单数据初始化
    this.formData = JSON.parse(JSON.stringify(this.currentItem))
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .mdpt-modify-dialog
    .el-dialog
      width 30%
      .el-dialog__body
        padding 20px 20px
        margin 0 auto
        margin-right 20px
        .el-date-editor
          width 260px
        .el-input
          width 100%
          .el-input__inner
            height 40px
        .el-button--primary
          float right
          margin-left 10px
        .el-button
          float right
        .el-date-editor
          height 40px
          width 100% !important
          .el-range-separator
            height 25px
</style>
